import { CheckIcon } from "@chakra-ui/icons";
import { Box, ChakraProps, Flex, IconButton, Slider, SliderFilledTrack, SliderThumb, SliderTrack ,Text} from "@chakra-ui/react";
import React, { useCallback, useState } from 'react';
import { CSSProperties } from "react";
import Cropper from 'react-easy-crop'
import { rect } from "../types/data";
import getCroppedImg from './cropImage'
interface PropInput {
  src: string
  onSubmit:(blob:Blob)=>void
}
function PhotoCrop({ src ,onSubmit}: PropInput) {
  const [crop, setCrop] = useState({ x: 0, y: 0 })
  const [rotation, setRotation] = useState(0)
  const [zoom, setZoom] = useState(1)
  const [croppedAreaPixels, setCroppedAreaPixels] = useState<rect|null>(null)
  const [isLoading, setLoading] = useState(false)
  const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
    setCroppedAreaPixels(croppedAreaPixels)
  }, [])
  const style: ChakraProps = {
    height: 'calc(100vh - 100px)',
    width: '100vw',
    backgroundColor: '#fff',
    position: 'absolute',
    top: 0,
    left: 0
  }
  const ctrlStyle: ChakraProps = {
    height: '100px',
    width: '100vw',
    backgroundColor: '#fff',
    position: 'fixed',
    bottom: 0,
    left: 0
  }
  const showCroppedImage = useCallback(async () => {
    try {
      if(!croppedAreaPixels)return;
      setLoading(true)
      const croppedImage = await getCroppedImg(
        src,
        croppedAreaPixels,
        rotation
        )
        croppedImage && onSubmit(croppedImage)
      } catch (e) {
        console.error(e)
      } finally{
        setLoading(false)
      }
  }, [croppedAreaPixels, rotation])
  return (
    <>
      <Box {...style}>
        <Cropper
          image={src}
          crop={crop}
          rotation={rotation}
          zoom={zoom}
          aspect={1 / 1}
          onCropChange={setCrop}
          onRotationChange={setRotation}
          onCropComplete={onCropComplete}
          onZoomChange={setZoom}
        />
      </Box>
      <Flex {...ctrlStyle} alignItems="center" px={5}>
        <Box w="full" pr={5}>
          <Flex mb={3}>
            <Text w="3em" mr={5}>缩放</Text>
            <Slider value={zoom}
              min={1}
              max={3}
              step={0.1}
              aria-labelledby="Zoom"
              defaultValue={1}
              onChange={(zoom) => setZoom(zoom)} >
              <SliderTrack>
                <SliderFilledTrack />
              </SliderTrack>
              <SliderThumb bg="blue.500"/>
            </Slider>
          </Flex>
          <Flex>
            <Text w="3em" mr={5}>旋转</Text>
            <Slider 
              value={rotation}
              min={0}
              max={360}
              step={1}
              defaultValue={1}
              aria-labelledby="Rotation"
              onChange={(rotation) => setRotation(rotation)} >
              <SliderTrack>
                <SliderFilledTrack />
              </SliderTrack>
              <SliderThumb bg="blue.500"/>
            </Slider>
          </Flex>
        </Box>
        <IconButton isLoading={isLoading} aria-label="confirm" icon={<CheckIcon />} onClick={showCroppedImage}/>
      </Flex>
    </>
  );
}

export default PhotoCrop;
